import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import ParticleBackground from '../../components/ParticleBackground'
import DataOverview from './components/DataOverview'
import CovidMap from './components/CovidMap'
import TrendChart from './components/TrendChart'
import RegionRank from './components/RegionRank'
import './index.css'

export default defineComponent({
  name: 'CovidDashboard',
  setup() {
    const router = useRouter()

    const goBack = () => {
      router.push('/')
    }

    return () => (
      <div class="covid-dashboard">
        <ParticleBackground />

        <div class="covid-dashboard__bg">
          <div class="covid-dashboard__bg-grid"></div>
          <div class="covid-dashboard__bg-glow covid-dashboard__bg-glow--1"></div>
          <div class="covid-dashboard__bg-glow covid-dashboard__bg-glow--2"></div>
        </div>

        <header class="covid-dashboard__header">
          <div class="covid-dashboard__back" onClick={goBack}>
            ← 返回
          </div>
          <h1 class="covid-dashboard__title">全国疫情实时动态大屏</h1>
          <div class="covid-dashboard__time">
            {new Date().toLocaleString('zh-CN')}
          </div>
        </header>

        <div class="covid-dashboard__content">
          {/* 数据概览 */}
          <div class="covid-dashboard__overview">
            <DataOverview />
          </div>

          {/* 主要内容区 */}
          <div class="covid-dashboard__main">
            {/* 左侧：地区排行榜 */}
            <div class="covid-dashboard__left">
              <RegionRank />
            </div>

            {/* 中间：疫情地图 */}
            <div class="covid-dashboard__center">
              <CovidMap />
            </div>

            {/* 右侧：趋势图表 */}
            <div class="covid-dashboard__right">
              <TrendChart />
            </div>
          </div>
        </div>

        <footer class="covid-dashboard__footer">
          <p>数据来源：国家卫健委 | 更新时间：实时更新</p>
        </footer>
      </div>
    )
  }
})
